caption -
side
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Ні |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS2,
CSS2.1 |
|
Значення
за умовчанням |
top |
|
Наслідує |
Так |
|
Застосовується |
ДО
<CAPTION> чи до усіх елементів, у яких значення display встановлене но
table, - caption. |
|
Аналог
HTML |
<caption
align="top | bottom"> |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/tables.html#propdef - caption - side |
Опис
Визначає
положення заголовка таблиці, який задається за допомогою тега <CAPTION>,
відносно самої таблиці. Властивість caption - side виводить заголовок до або
після таблиці, а вирівнювання тексту по правому або лівому краю встановлюється
через властивість text - align. Браузер Firefox також підтримує розташування
заголовка ліворуч або праворуч від таблиці, але ці значення не входять в
специфікацію CSS.
Синтаксис
caption -
side: top | bottom
Значення
top Розташовує
заголовок по верхньому краю таблиці.
bottom Заголовок
розташовується під таблицею.
right Заголовок
розміщується праворуч від таблиці. Це значення працює тільки у браузерах
Firefox.
left Заголовок розміщується зліва від таблиці. Це значення працює тільки у
браузерах Firefox.
Приклад
HTML 4.0 CSS 2.1 IE
6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>Розташування
заголовка</title>
<style type="text/css">
table {
width: 350px; /* Ширина таблиці */
border-collapse: collapse; /* Прибираємо
подвійну рамку між осередками */
}
td {
border: 1px solid green; /* Параметрів
межі */
padding: 5px; /* Полів в осередку */
}
caption {
caption-side: bottom; /* Заголовок під
таблицею */
}
</style>
</head>
<body>
<table>
<caption>Розклад карт</caption>
<tr>
<td> </td>
<td>♠</td>
<td>♣</td>
<td>♥</td>
<td>♦</td>
</tr>
<tr>
<td>Чебурашка</td>
<td>6</td><td>3</td>
<td>1</td><td>3</td>
</tr>
<tr>
<td>Крокодил Гена </td>
<td>1</td><td>5</td>
<td>5</td><td>2</td>
</tr>
<tr>
<td>Шапокляк</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>0</td>
</tr>
<tr>
<td>Щур Лариса </td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>8</td>
</tr>
</table>
</body>
</html>
Результат
цього прикладу показаний на мал. 1.
Мал. 1.
Результат використання caption - side
Об'єктна модель
[window.]document.getElementById("elementID").style.captionSide